<template>
	<view>
		<view class="Lu-busin-box" v-if="userInfo.agent_pay_status == 1">
			<view class="Lu-busin-img">
				<image class="Lu-busin-img2" src="https://www.quyidian.com.cn/uploads/tool/ruzu.png" mode="widthFix"></image>
			</view>
			<view class="Lu-busin-btn" @click="ruzhumoney">
				立即入驻
			</view>
		</view>
		<view class="Lu-busin-perfect" v-else-if="userInfo.agent_pay_status == 2&&userInfo.apply_agent_status == 0" @click="navTo('/pages/personal/shangjoin')">
			去完善商家信息
		</view>
		<view v-else>
			<view class="Lu-mer-box">
				<view class="Lu-mer-header">
					<!-- <view class="Lu-mer-back" @click="navback()">
						<text class="iconfont icon-fanhui"></text>
					</view> -->
					<view class="Lu-mer-proimg">
						<image class="Lu-mer-img" :src="apiUrl + merchantInfor.pic"></image>
					</view>
					<view class="Lu-mer-title">
						<view class="Lu-mer-name">{{merchantInfor.name}} 
							<view>
								<!-- <text>1</text> -->
								<text class="Lu-mer-shenhe" v-if="userInfo.apply_agent_status == 1">(已申请)</text>
								<text class="Lu-mer-shenhe" v-else-if="userInfo.apply_agent_status == 2">(待审核)</text>
								<text class="Lu-mer-shenhe" v-else-if="userInfo.apply_agent_status == 3">(已审核通过)</text> 
								<text class="Lu-mer-shenhe" v-else-if="userInfo.apply_agent_status == 4">(审核失败)</text> 
							</view>
							<text class="Lu-mer-xiugai" @click="navToss(userInfo.agent_id)">修改商家信息</text>
						</view>
						<view class="Lu-mer-introduce">校区介绍：{{merchantInfor.describe}}</view>
						<view class="Lu-mer-adress clearfix">
							<text class="iconfont icon-dingwei fl">{{merchantInfor.address}}</text>
							<text class="iconfont icon-phone fr">{{merchantInfor.phone}}</text>
						</view>
					</view>
				</view>
				<view class="Lu-mer-body">
					<view class="Lu-mer-bodytit">
						开设课程
						<text class="Lu-add-kecheng" @click="navTos(userInfo.agent_id)">添加课程</text>
					</view>
					<view class="Lu-mer-Courses">
						<view class="Lu-mer-Course clearfix" v-for="(item,index) in merchantInfor.agent_goods_list" :key="index" @click="navTo1(item)">
							<view class="Lu-mer-CourseImg fl">
								<image class="Lu-mer-img" mode="aspectFill" :src="apiUrl + item.course_pic"></image>
							</view>
							<view class="Lu-mer-infor fl">
								<view class="Lu-mer-currtitle">{{item.course_name}}</view>
								<view class="Lu-mer-currVip">
									<text class="iconfont icon-xsm">{{item.people_num}}名会员加入</text>
								</view>
								<view class="Lu-mer-introduction">{{item.course_class_details}}</view>
								<view class="Lu-mer-prices clearfix">
									<view class="Lu-mer-price fl">￥{{item.course_platform_price}}</view>
									<view class="Lu-mer-buy fr">立即抢购</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import md5 from 'js-md5';
	export default {
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl'])
		},
		data() {
			return {
				userid:'',
				ruzhumoneys:4999.00,
				agent_id:'',
				merchantInfor:{}
			}
		},
		onLoad:function(){
			this.wxgetmerchantInfor()
			
		},
		onShow:function(){
			uni.request({
				url:this.apiUrl+'api/userInfo',
				method:"POST",
				header:{
					openid:this.openId
				},
				success: (res) => {
					console.log(res.data.data)
					this.$store.commit('login', res.data.data);
				}
			})
		},
		methods:{
			wxgetmerchantInfor:function(){
				uni.request({
					url:this.apiUrl+ 'api/get_agent_info',
					data:{
						agent_id:this.userInfo.agent_id
					},
					method:'POST',
					header:{
						openid:this.openId
					},
					success: (res) => {
						this.merchantInfor = res.data.data
						console.log(res)
					}
				})
			},
			
			navTo(url) {
				if (!this.hasLogin) {
					// this.wxGetUserInfo()
					uni.showModal({
					    title: '未登录',
					    content: '请授权登录',
					    success: function (res) {
					        if (res.confirm) {
					           
					        } else if (res.cancel) {
					            
					        }
					    }
					})
				}else{
					uni.navigateTo({
						url
					})
				}
				
			},
			
			navTo1:function(item){
				uni.navigateTo({
					url: `/pages/classification/course?id=${item.id}`
				})
			},
			navTos:function(item) {
				uni.navigateTo({
					url: `/pages/personal/kecheng?id=${item}`
				})
			},
			navToss:function(item) {
				uni.navigateTo({
					url: `/pages/personal/shangjoin?id=${item}`
				})
			},
			ruzhumoney:function(){
				const shortName = this.openId.substring(0,this.userInfo.id%10) + this.ruzhumoneys*100;
				uni.request({
					url:this.apiUrl+ 'api/payment',
					data:{
						money:this.ruzhumoneys*100,
						sign:md5(shortName),
						type:3,
						request_type:1
					},
					method:'POST',
					header:{
						openid:this.openId
					},
					success: (res) => {
						console.log(res.data.data)
						const _this = this
						
						//#ifdef APP-PLUS
						let obj = {
							appid: res.data.data.appid,
							noncestr: res.data.data.noncestr,
							package: 'Sign=WXPay', // 固定值，以微信支付文档为主
							partnerid: '1573493581',
							prepayid: res.data.data.prepayid,
							timestamp: res.data.data.timestamp,
							sign: res.data.data.sign // 根据签名算法生成签名
						}
						console.log(JSON.stringify(obj))
						uni.requestPayment({
						    provider: 'wxpay',
						    orderInfo:JSON.stringify(obj),
						    success: function (res) {
						      uni.showModal({
							   title: '支付成功',
							   content: '支付成功',
							   success: function (res) {
								   if (res.confirm) {
									  
								   } else if (res.cancel) {
									   
								   }
						           }
						       })
							   uni.request({
									url:_this.apiUrl+'api/userInfo',
									method:"POST",
									header:{
										openid:_this.openId
									},
									success: (res) => {
										_this.$store.commit('login', res.data.data);
									}
							   })
						    },
						    fail: function (err) {
								console.log(err)
						        uni.showModal({
						            title: '支付失败',
									content: '支付失败',
						            success: function (res) {
						                if (res.confirm) {
						                   
						                } else if (res.cancel) {
						                    
						                }
						            }
						        })
						    }
						});
						//#endif
						//#ifdef MP-WEIXIN
						uni.requestPayment({
						    provider: 'wxpay',
						    timeStamp: res.data.data.timeStamp,
						    nonceStr: res.data.data.nonceStr,
						    package: res.data.data.package,
						    signType: res.data.data.signType,
						    paySign: res.data.data.paySign,
						    success: function (res) {
						       uni.showModal({
						           title: '支付成功',
						           success: function (res) {
						               
						           }
						       }),
							   uni.request({
									url:_this.apiUrl+'api/userInfo',
									method:"POST",
									header:{
										openid:_this.openId
									},
									success: (res) => {
										_this.$store.commit('login', res.data.data);
									}
							   })
						    },
						    fail: function (err) {
						        uni.showModal({
						            title: '支付失败',
						            success: function (res) {
						                if (res.confirm) {
						                   
						                } else if (res.cancel) {
						                    
						                }
						            }
						        })
						    }
						});
						//#endif
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.Lu-busin-box{
		position: relative;
	}
	.Lu-busin-img{
		.Lu-busin-img2{
			width: 750rpx;
		}
	}
	.Lu-busin-btn{
		background-image: url(~@/static/image/business/btnbg.png);
		background-size: 710rpx 100rpx;
		background-repeat: no-repeat;
		width: 710rpx;
		height: 100rpx;
		
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #fff;
		position: absolute;
		bottom: 10rpx;
		left: 20rpx;
	}
	.Lu-busin-perfect{
		background-image: url(~@/static/image/business/btnbg.png);
		background-size: 710rpx 100rpx;
		background-repeat: no-repeat;
		width: 710rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #fff;
		position: absolute;
		top: 50rpx;
		left: 20rpx;
	}
	.Lu-mer-box{
		.Lu-mer-header{
			position: relative;
			.Lu-mer-back{
				position: absolute;
				top: 60rpx;
				left: 0;
				z-index: 5;
				padding: 0 30rpx;
				font-size: 30rpx;
				text{
					color: #fff;
				}
			}
			.Lu-mer-proimg{
				width: 100%;
				.Lu-mer-img{
					width: 100%;
				}
			}
			.Lu-mer-title{
				padding: 20rpx 30rpx;
				background-color: #fff;
				position: relative;
				.Lu-mer-xiugai{
					position: absolute;
					right: 20rpx;
					top: 30rpx;
					font-size: 24rpx;
				}
				.Lu-mer-shenhe{
					font-size: 24rpx;
				}
				.Lu-mer-name{
					font-size: 36rpx;
					color: #333333;
				}
				.Lu-mer-introduce{
					font-size: 28rpx;
					color: #999999;
					margin: 20rpx 0;
				}
				.Lu-mer-adress{
					font-size: 28rpx;
					color: #999999;
					text{
						font-size: 28rpx !important;
					}
				}
			}
		}
		.Lu-mer-body{
			margin: 20rpx;
			padding-top: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			position: relative;
			.Lu-mer-bodytit{
				
				background-image: url(~@/static/image/classific/bg22.png);
				background-size: 240rpx 80rpx;
				background-repeat: no-repeat;
				height: 80rpx;
				width: 240rpx;
				line-height: 70rpx;
				text-align: center;
				margin: 0 auto;
				
				font-size: 34rpx;
				color: #fff;
				
				.Lu-add-kecheng{
					position: absolute;
					right: 50rpx;
					top:30rpx;
					font-size: 24rpx;
					color: #333333;
				}
			}
			.Lu-mer-Courses{
				margin-top: 20rpx;
				.Lu-mer-Course{
					padding: 20rpx 0 20rpx 20rpx;
					.Lu-mer-CourseImg{
						width: 180rpx;
						height: 180rpx;
						.Lu-mer-img{
							width: 100%;
							height: 100%;
						}
					}
					.Lu-mer-infor{
						margin-left: 30rpx;
						width: 480rpx;

						.Lu-mer-currtitle{
							font-size: 30rpx;
							color: #333333;
							
						}
						.Lu-mer-currVip{
							height: 40rpx;
							line-height: 40rpx;
							text{
								font-size: 24rpx;
								color: #666666;
							}
						}
						.Lu-mer-introduction{
							font-size: 24rpx;
							color: #999999;
							margin-top: 8rpx;
						}
						.Lu-mer-prices{
							.Lu-mer-price{
								font-size: 38rpx;
								color: #ff3e3e;
							}
							.Lu-mer-buy{
								background-image: url(~@/static/image/classific/bg11.png);
								background-repeat: no-repeat;
								background-size: 150rpx 60rpx;
								height: 60rpx;
								line-height: 50rpx;
								width: 150rpx;
								font-size: 26rpx;
								color: #fff;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
</style>
